window.onload = function() {

  // 初始化DOM元素
  var contianer = getE('box');
  var leftin = getE('leftin');
  var rightin = getE('rightin');
  var leftout = getE('leftout');
  var rightout = getE('rightout');
  var osc = getE('osc');
  var dec = getE('dec');
  var itemList = [];

  // 获取DOM元素
  function getE(id) {
    return document.getElementById(id);
  }

  // 获取input的值并验证
  function getVal() {
    var val = getE('input').value;
    if (val < 10 || val > 100) {
      return null;
    } else {
      return val;
    }
  }

  // 新建一个节点
  function creatNewItem(val) {
    var item = document.createElement('div');
    item.className = 'items';
    // 修改节点的高度
    item.style.height = val + 'px';
    return item;
  }

  // 左侧入
  function leftIn() {
    if (itemList.length >= 60) {
      alert('队列元素数量最多限制为60个,现已带到限制数量！');
      return;
    }
    // 获取input的值
    var val = getVal()

    // 插入itemList第一位
    if (val) {
      itemList.unshift(val);
      rennder();
    }
  }

  // 右侧入
  function rightIn() {
    if (itemList.length >= 60) {
      alert('队列元素数量最多限制为60个,现已带到限制数量！');
      return;
    }
    var val = getVal()
      // 放入itemList最后一位
    if (val) {
      itemList.push(val);
      rennder();
    }
  }

  // 左侧出
  function leftOut() {
    itemList.shift();
    rennder();
  }

  // 右侧出
  function rightOut() {
    itemList.pop();
    rennder();
  }

  // 单价节点删除
  function cdel(e) {
    var node = e.target;
    if (node.className.toUpperCase() === 'ITEMS') {
      var val = node.offsetHeight;
      var index = node.getAttribute('data-index');
      console.log(index);
      itemList.splice(index, 1);
      rennder();
    }
  }

  // 渲染
  function rennder() {
    var len = itemList.length;
    contianer.innerHTML = '';
    var docf = document.createDocumentFragment();
    for (var i = 0; i < len; i++) {
      var item = creatNewItem(itemList[i]);
      item.setAttribute('data-index', i);
      item.style.left = i * 21 + 'px';
      docf.appendChild(item);
    }
    contianer.appendChild(docf);
  }

  function oscf() {
    itemList.sort(function(a, b) {
      return a - b;
    });

    rennder();
  }

  function decf() {
    itemList.sort(function(a, b) {
      return b - a;
    });

    rennder();
  }

  // 定义事件
  leftin.addEventListener('click', leftIn, false);
  rightin.addEventListener('click', rightIn, false);
  leftout.addEventListener('click', leftOut, false);
  rightout.addEventListener('click', rightOut, false);
  contianer.addEventListener('click', cdel, false);
  osc.addEventListener('click', oscf, false);
  dec.addEventListener('click', decf, false);

};
